import React, { useEffect, useState } from 'react'
import { NavBar, Space, Toast, Card, SearchBar, Button } from 'antd-mobile'
import { useLocation, useNavigate, useParams } from 'react-router-dom'
import request from '../api/request'
import { useSelector, useDispatch } from 'react-redux'
import { IndexBar, List, Tag } from 'antd-mobile'
import { HeartOutline, UploadOutline } from 'antd-mobile-icons'
import styles from './index.module.css'
import { SubmitBar } from 'react-vant';
import { ShareSheet, Cell } from 'react-vant'

// 地图
import AMapLoader from "@amap/amap-jsapi-loader";
function Dttaill() {
    let navtion = useNavigate()
    let { state } = useLocation()
    console.log(state);
    const options = [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
    ]
    const [visible, setVisible] = useState(false)
    const [detlist, setDetlist] = useState([])

    const [heart, setHeart] = useState(JSON.parse(localStorage.getItem('heart')))
    const xin = () => {
        const xin = heart.some((it) => it.id == state.id)
        if (xin) {
            const shou = heart.filter((it) => it.id !== state.id)
            setHeart(shou)
            localStorage.setItem('heart', JSON.stringify([...heart, state]))
        }
        else {
            setHeart([...heart, state])
            localStorage.setItem('heart', JSON.stringify([...heart, state]))
        }

    }

    //    地图
    let map = null;

    useEffect(() => {
        window._AMapSecurityConfig = {
            securityJsCode: "7c7c4c6c17f85ee0a7579245cfe3ef9a",
        };
        AMapLoader.load({
            key: "ee8aae6487407d288538a240fda38b34", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
        })
            .then((AMap) => {
                map = new AMap.Map("container", {
                    // 设置地图容器id
                    viewMode: "3D", // 是否为3D地图模式
                    zoom: 11, // 初始化地图级别
                    center: [116.397428, 39.90923], // 初始化地图中心点位置
                });
                var position = [
                    [116.493195, 39.993253],
                    [116.473195, 39.993253],
                    [116.453195, 39.993253],
                    [116.493195, 39.973253],
                    [116.473195, 39.973253],
                    [116.453195, 39.973253],
                    [116.493195, 39.953253],
                    [116.473195, 39.953253],
                    [116.453195, 39.953253]
                ];
                var content = [
                    'bottom-left',
                    'bottom-center',
                    'bottom-right',
                    'middle-left',
                    'center',
                    'middle-right',
                    'top-left',
                    'top-center',
                    'top-right'
                ]
                for (var i = 0; i < position.length; i++) {
                    const marker = new AMap.Marker({
                        position: position[i],
                        lable: {
                            content: '北京', //将 html 传给 content
                            offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
                        }

                    });
                    map.add(marker);
                }

            })
            .catch((e) => {
                console.log(e);
            });

        return () => {
            map?.destroy();
        };
    }, []);
    return (
        <div>


            <HeartOutline
                onClick={() => xin(state)}
                fontSize={20}
                color={heart.some((it) => it.id == state.id) ? 'red' : '#ccc'}

            />
            <div>
                {/* <h1 style={{float:'right'}} onClick={()=>xin(detlist.id)} color={heart.some((it)=>it.id==detlist.id)   ? "orangered" : "#999" }><HeartOutline /></h1> */}
                <Card
                    // extra={}
                    headerStyle={{
                        color: '#1677ff',
                    }}
                    bodyClassName={styles.customBody}
                    title={<img src={state.image} />}
                >
                    <div>
                        <dl>
                            <dt><img src={state.image} /></dt>
                            <dl>{state.title}</dl>
                        </dl>
                    </div>
                </Card>
            </div>
            <div>
                <h2>房价肯定会飞机和符号高科技的恢复可见和大家大师傅似的</h2>
                <Cell isLink title='显示分享面板' onClick={() => setVisible(true)} />

                <ShareSheet
                    visible={visible}
                    options={options}
                    title='立即分享给好友'
                    onCancel={() => setVisible(false)}
                    onSelect={(option, index) => {
                        console.log('option', option)
                        console.log('index', index)
                        setVisible(false)
                    }}
                />

            </div>
            <Button onClick={() => navtion('/xz')}>选座</Button>
            <Button onClick={() => navtion('/listt')}>列表</Button>
            <div className="demo-submit-bar"><SubmitBar price="3050" buttonText="提交订单" /></div>;

            {/* 地图 */}
            <div>
                <div
                    id="container"

                    style={{ height: "200px" }}
                ></div>
            </div>
        </div>
    )
}

export default Dttaill
